{include file="public/header" /}
<link rel="stylesheet" href="/static/admin/css/productEdit.css" media="all">
<style>
    .hide{
        display: none;
    }
</style>
<body>
<div class="x-body layui-anim" style="padding-top: 0">
    <form class="layui-form" id="form" action="{:url('saveProduct')}">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                <li class="layui-this">商品信息</li>
                <li>商品规格</li>
                <li>商品图片</li>
                <li>商品详情</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="title" lay-verify="required" lay-reqtext="请填写商品名称"
                                   placeholder="请填写商品名称" class="layui-input" value="{$info?$info.title:''}"/>
                        </div>
                    </div>

                    <div class="layui-form-item" data-url="{:url('lntegralCate/getCate')}">
                        <label class="layui-form-label">所属分类</label>
                        <div class="layui-input-inline">
                            <select name="cate_1" id="cate_1"  data-id="{$info?$info.cate_1:''}"lay-filter="cate_1" lay-verify="required"
                                    lay-reqtext="请选择所属分类">
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品类型</label>
                        <div class="layui-input-block">
                            {if empty($info)}
                            <input type="radio" name="types" lay-filter="shoptypes" value="lntegral" title="商品" checked>
                            <input type="radio" name="types" lay-filter="shoptypes" value="coupon" title="优惠券">
                            {else}
                            <input type="radio" name="types" lay-filter="shoptypes" value="lntegral" title="商品" <?php if($info->types == 'lntegral'){?>checked
                            <?php }?>>
                            <input type="radio" name="types" lay-filter="shoptypes" value="coupon" title="优惠券" <?php if($info->types == 'coupon'){?>checked
                            <?php }?>>
                            {/if}
                        </div>
                    </div>
                    <div class="layui-form-item" id="coupon">
                        <label class="layui-form-label">优惠券</label>
                        <div class="layui-input-inline">
                            <select name="coupon_id" >
                                <option value="0">请选择优惠券</option>
                                {volist name="coupon" id="v"}
                                <option value="{$v.id}" {notempty name="info"}{if $v.id==$info.coupon_id}selected{/if} {/notempty}>{$v.title}</option>
                                {/volist}
                            </select>
                        </div>
                    </div>
                    
                    <div class="layui-form-item">
                        <label class="layui-form-label">排序</label>
                        <div class="layui-input-inline">
                            <input type="text" name="sort" autocomplete="off" placeholder="请输入排序，越小越靠前"
                                   class="layui-input"
                                   value="{$info?$info.sort:''}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">销量</label>
                            <div class="layui-input-inline" style="width: 150px;">
                                <input type="text" name="sales" value="{$info?$info.sales:''}"
                                       placeholder="请输入销量" autocomplete="off" class="layui-input">
                            </div>

                        </div>
                    </div>

                </div>
                <div class="layui-tab-item">
                    <!-- sku参数表 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">规格：</label>
                        <div class="layui-input-block">
                            <div class="fairy-spec-table"></div>
                        </div>
                    </div>

                    <!-- 动态sku表 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">规格表：</label>
                        <div class="layui-input-block">
                            <div class="fairy-sku-table"></div>
                        </div>
                    </div>

                </div>
                <div class="layui-tab-item">
                    <div class="layui-tab-item layui-show">
                        <div class="openMaterialDraggable" id="openMaterial_images">
                             {if(isset($info) && !empty($info['images']))}
                                {foreach name="$info.images" item="vo"}
                                <div class="material-preview">
                                    <div class="del-wrap" >
                                        <div>
                                            <div class="file-item relative" style="height: 100px; width: 100px;">
                                                <div class="el-image image">
                                                    <img src="{$vo}" class="el-image__inner" style="object-fit: contain;">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="icon-close uploadDels">
                                            <i class="el-icon layui-icon layui-icon-close" style="font-size: 12px; --color: inherit;"></i>
                                        </div>
                                    </div>
                                    <div class="operation-btns text-xs text-center">
                                        <span class="openMaterialPreview" data-url="{$vo}">查看</span>
                                    </div>
                                </div>
                                {/foreach}
                                <input type="hidden" name="images" id="uploadimage_images" value="<?php echo implode(',',$info['images']); ?>"/>
                            {/if}
                        </div>
                        <div class="upload-btn openMaterial" data-name="images" data-id="openMaterial_images" data-count="5" style="width: 100px; height: 100px;">
                            <i class="layui-icon layui-icon-addition" style="font-size: 25px; --color: inherit;"></i>
                            <span>添加</span>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">兑换说明</label>
                        <div class="layui-input-block">
                            <textarea name="content_images" placeholder="请输入兑换说明" class="layui-textarea"><?php echo isset($info)?$info['content_images']:'';?></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">详情</label>
                        <div class="layui-input-block">
                            <div data-filed="content_text" id="editor—wrapper" class="wang-editor editor—wrapper"
                                 data-value="<?php echo isset($info)?$info['content_text']:'';?>">
                                <input type="hidden" class="editor—content_text" name="content_text" value=''/>
                                <div class="toolbar-container" id="toolbar-container-content_text"><!-- 工具栏 --></div>
                                <div class="editor-container" id="editor-container-content_text"><!-- 编辑器 --></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <input type="hidden" id="id" name="id" value="{$info?$Request.param.id:''}">
        <input type="hidden" id="types"  value="{$info?$info.types:''}">
        <div class="layui-form-item layui-layout-admin">
            <div class="layui-input-block">
                <div class="layui-footer" style="left: 0;">
                    <div class="layui-footer" style="left: 0;">
                        <a class="layui-btn" lay-filter="saveProduct" lay-submit>保存</a>
                    </div>
                </div>
            </div>
        </div>

    </form>
</div>
</body>
{include file="public/footer" /}
<script id="openMaterialTemplate" type="text/html">
    {{# for(var i=0;i<d.data.length ;i++){ }}
    <div class="material-preview">
        <div class="del-wrap" >
            <div>
                <div class="file-item relative" style="height: 100px; width: 100px;">
                    <div class="el-image image">
                        <img src="{{d.data[i]}}" class="el-image__inner" style="object-fit: contain;">
                    </div>
                </div>
            </div>
            <div class="icon-close uploadDels">
                <i class="el-icon layui-icon layui-icon-close " style="font-size: 12px; --color: inherit;"></i>
            </div>
        </div>
        <div class="operation-btns text-xs text-center">
            <span class="openMaterialPreview" data-url="{{d.data[i]}}">查看</span>
        </div>
    </div>
    <input type="hidden" name="{{d.name}}" value="{{(d.data).join(',')}}"/>
    {{# } }}
</script>
<script>
    layui.config({
        base: '/static/admin/js/'
    }).use(['form', 'table', 'skuTable'], function () {
        var form = layui.form,
            skuTable = layui.skuTable,
            obj,
            pid = $('#id').val(),
            types = $('#types').val(),
            table = layui.table;
        $("#coupon").hide();
        console.log(types);
        if (types=='coupon') {
            $("#coupon").show();
        }
        //初始化规格
        if (pid) {
            var cate_1 = $('#cate_1').attr('data-id');
            createSkuTable('{$info?$info.cate_1:""}', pid)
        }
        
        createSelect($("#cate_1"), 0)
        //联动获取二级分类
        form.on('select(cate_1)', function (data) {
            if (data.value) {
                createSkuTable(data.value)
            }else{
                skuTableRender();
            }
        });
        form.on('radio(shoptypes)', function (data) {
            if (data.value=='coupon') {　　　　　　//判断当前多选框是选中还是取消选中
                $("#coupon").show();
            } else {
                $("#coupon").hide();
            }
        });
        //二级分类获取规格类型
        form.on('select(cate_2)', function (data) {
            if (data.value) {
                createSkuTable(data.value)
            } else {
                skuTableRender();
            }
        })
        function createSkuTable(id, pid = '') {
            layer.load(2);
            $.ajax({
                type: 'GET',
                url: '{:url("lntegralSpec/getSpec")}',
                data: {id: id, pid: pid},
                dataType: "json",
                success: function (data) {
                    skuTableRender(data.result.specData, data.result.skuData);
                }
            });
        }
        function skuTableRender(data = '', value = '') {
            obj = skuTable.render({
                rowspan: true,
                //上传占位图
                skuIcon: '/static/admin/images/sku-add.png',
                //上传地址
                uploadUrl: "{:url('uploads/uploadImage')}",
                specValueCreateUrl: "{:url('uploads/uploadImage')}",
                //sku表格配置
                skuTableConfig: {
                    thead: [
                        {title: '图片', icon: ''},
                        {title: '价格', icon: 'layui-icon-cols'},
                        {title: '库存', icon: 'layui-icon-cols'},
                    ],
                    tbody: [
                        {type: 'image', field: 'icon', value: '', verify: '', reqtext: ''},
                        {type: 'input', field: 'price', value: '0', verify: 'number'},
                        {type: 'input', field: 'stock', value: '0', verify: 'number'},
                    ]
                },
                specData: data,
                skuData: value
            });
            layer.closeAll();
        }

        function createSelect(obj, id) {
            $.get('{:url("lntegralCate/getCate")}', {id: id},
                function (data) {
                    var options = '<option value="">请选择</option>';
                    $.each(data, function (i) {
                        var selected = obj.attr('data-id') == data[i]['id'] ? 'selected' : '';
                        options += '<option value="' + data[i]['id'] + '" ' + selected + '>' + data[i]['title'] + '</option>';
                    })
                    obj.html(options);
                    form.render();
                }, 'json'
            )
        }

        form.verify();
        form.on('submit(saveProduct)', function (data) {
            // //获取规格数据
             console.log(obj.getSpecData());
            // //获取表单数据
             console.log(data.field);
            data.field.specData = obj.getSpecData();
            var state = Object.keys(data.field).some(function (item, index, array) {
                return item.startsWith('skus');
            });
            if (!state) {
                layer.msg('规格表数据不能为空', {icon: 5, anim: 6});
                return false;
            }
            var load = layer.load();
            console.log($("#form").attr('action'));
            $.ajax({
                type: 'POST',
                url: $("#form").attr('action'),
                data: data.field,
                dataType: "json",
                success: function (data) {
                    layer.close(load);
                    if (data.code == 1) {
                        layer.msg(data.msg, {time: 1000}, function () {
                            if (window.name != '') {
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                                parent.window.location.reload();
                            } else {
                                window.location.reload();
                            }
                        });
                    } else {
                        layer.msg(data.msg);
                    }

                }
            });

        });
    });
</script>
</html>